<template>
	<ucs-svg :width="size" :height="size" :src="iconSvg" />
</template>
<script setup lang="uts">
	/**
	 * @description 《懂车帝》图标
	 * @tutorial https://ucs.cloudsimpler.com/library/ucs-iconPark
	 * @property {Number} size 图标大小
	 * @property {Number} strokeWidth 线段粗细
	 * @property {String} theme 图标大小
	 * @property {Array<string>} fill 图标颜色，["外部描边颜色","外部填充颜色","内部描边颜色","内部填充颜色"]
	 * @property {String} strokeLinecap 图标大小
	 * @property {String} strokeLinejoin 图标大小
	 */
	import { colors, IiconParkProps } from "../../mixins/iconParkMixin.uts";
	import { computed } from "vue";
	
	const props = withDefaults(defineProps<IiconParkProps>(), {
		size: 24,
		strokeWidth: 4,
		theme: 'outline',
		fill: ["#000000"],
		strokeLinecap: 'round',
		strokeLinejoin: 'round'
	});

	const iconSvg = computed(() : string => {
		return `<?xml version="1.0" encoding="UTF-8"?><svg width="${props.size}" height="${props.size}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M38.1606 33.56C33.8437 32.0395 29.2094 31.2447 24.4417 31.2447C19.3825 31.2447 14.4746 32.1398 9.93952 33.8452C10.3385 34.9475 10.8603 36.0005 11.4967 36.9867L6.45533 40.2401C4.2134 36.766 3 32.6952 3 28.4489C3 16.6193 12.3853 7 24 7C35.6147 7 45 16.6193 45 28.4489C45 32.8826 43.6768 37.123 41.2468 40.6893L36.2884 37.3107C37.0796 36.1496 37.7085 34.8892 38.1606 33.56ZM38.5991 24.8845C37.0353 18.0613 31.0806 13 24 13C16.8282 13 10.8115 18.1925 9.34267 25.1491C9.10649 26.4791 9.46633 27.6361 10.4538 27.3315C14.9074 25.9582 19.6194 25.2447 24.4417 25.2447C29.0985 25.2447 33.6535 25.9099 37.9738 27.1936C38.828 27.4474 38.9554 26.3771 38.6153 24.9682C38.6078 24.9372 38.6024 24.9093 38.5991 24.8845Z" fill="${colors(props.theme, props.fill, 0)}"/></svg>`
	});
</script>